سفارش تبلیغ
صبا ویژن

canvas چیست؟

Canvas یکی از محبوب‌ترین ویژگی‌ها و امکانات HTML5 است. توسعه‌دهندگان از Canvas برای ساخت وب‌اپلیکیشن‌های فاخر استفاده می‌کنند. HTML یک زبان نشانه‌گذاری است که امکان ایجاد و ساخت بخش‌ها (Section)، پاراگراف‌ها، عنوان‌‌ها، لینک‌ها و سایر موارد را برای صفحات وب و برنامه‌های کاربردی فراهم می‌کند. کاربران می‌توانند از وب‌سایت‌های ساخته شده با Canvas بدون نیاز به افزونه‌های مرورگر مثل ادوبی فلش پلیر استفاده کنند.

اکثر مرورگرهای امروزی مثل کروم، فایرفاکس، سافاری، اوپرا (Opera) و اینترنت اکسپلورر نسخه نُه و ده  از Canvas پشتیبانی می‌کنند. عنصر Canvas در HTML برای رسم نگاره‌ (گرافیک | Graphic) در حین اجرا (On The Fly) با استفاده از جاوا اسکریپت (JavaScript) استفاده می‌شود. عنصر Canvas تنها یک محفظه نگهدارنده (Container) برای نگاره‌ است. برای رسم نگاره‌ باید از جاوا اسکریپت استفاده کرد. Canvas دارای متدهای (Method) بسیاری برای رسم خط‌سیر (Path)، محفظه (Box)، دایره، متن و افزودن عکس است.

تاریخچه Canvas

جهت درک اهمیت آموزش Canvas داشتن اطلاعاتی در خصوص تاریخچه آن می‌تواند مفید باشد. Canvas در ابتدا توسط شرکت اپل برای استفاده در قطعه وب‌کیت (WebKit) مک‌اواس ده (Mac OS X) در اوایل سال 1383 با هدف بهبود اپلیکیشن‌هایی مثل ویجت‌های Dashboard و مرورگر سافاری معرفی شد.

Canvas در نسخه 1/8 مرورگرهای Gecko در سال 1384 و در مرورگر اوپرا‌ در سال 1385 به کار گرفته شد و توسط کارگروه تعیین تکنولوژی نحوه استفاده از ابرمتن وب (Web Hypertext Application Technology Working Group |‌ WHATWG) برای مشخصات نسل بعدی فناوری‌های وب استانداردسازی شد. امروزه،‌ تمامی مرورگرهای برجسته از Canvas پشتیبانی می‌کنند.

پیش نیاز های Canvas چیست ؟

آشنایی با HTML و جاوا اسکریپت پیش‌نیازهای اساسی Canvas هستند. قبل از شروع آموزش Canvas باید پیش‌نیازهای لازم را فرا گرفت. همان‌طور که بیان شد، Canvas یک عنصر در HTML5 است. بنابراین، آشنایی با HTML و خصوصاً HTML5 به عنوان پیش‌نیاز، قبل از شروع آموزش Canvas ضروری است.

اگر دوست دارین درباره زبان اچ تی ام ال 5 بیشتر بدونین بهتون مطالعه مقاله HTML5 چیست و چه کاربردی دارد رو پیشنهاد میکنم

همچنین، همان‌طور که در ابتدا توضیح داده شد، از جاوا اسکریپت برای ترسیم نگاره‌ها در محفظه نگهدارنده Canvas استفاده می‌شود. بنابراین، واضح است که قبل از آموزش Canvas باید آشنایی کافی با جاوا اسکریپت وجود داشته باشد.

جاوا اسکریپت چیست ؟

جاوا اسکریپت (JavaScript |‌ JS) یک زبان برنامه‌نویسی است که امکان پیاده‌سازی ویژگی‌های پیچیده را در صفحات وب فراهم می‌کند. جاوا اسکریپت به کاربران اجازه می‌دهد با صفحات وب تعامل داشته باشند. از فریم‌وُر‌ک‌های متعدد جاوا اسکریپت برای ساخت اپلیکیشن‌های وب و موبایل استفاده می‌شود. همچنین، JavaScript برای ساخت وب‌سرورها، توسعه کاربردهای مرتبط با سرور و توسعه بازی‌های کامپیوتری نیز به کار گرفته می‌شود.

Canvas برای چه کاری استفاده می‌شود ؟

به طور رسمی، Canvas یک طرح بیتی (Bitmap) مبتنی بر وضوح تصویر (resolution) است که می‌توان از آن برای پردازش نمودار‌ها، نگاره‌های بازی یا تصاویر بصری در حین اجرا استفاده کرد. به بیان ساده، با کمک یک عنصر Canvas متشکل از جاوا اسکریپت و HTML5، می‌توان اشکال دوبعدی و تصاویر بیت‌مپ را پردازش کرد. یک صفحه وب، ممکن است حاوی چند عنصر Canvas‌ باشد. هر Canvas دارای یک شناسه است که با استفاده از این شناسه می‌توان از طریق جاوا اسکریپت به آن دسترسی پیدا کرد.

هر عنصر Canvas دارای یک زمینه (Context) دو بعدی است. این زمینه، حاوی تعدادی شی?، خصوصیت (Properties) و متُد است. برای رسم روی یک Canvas، باید به زمینه آن ارجاع داده شود. زمینه، دسترسی به تنظیمات و متدهای آن Canvas‌ را فراهم می‌کند. هر عنصر Canvas، دو موقعیت x و y دارد که x مختصات افقی و y مختصات عمودی است. تصویر زیر مختصات Canvas را نمایش می‌دهد.

تفاوت Canvas با SVG چیست؟

در آموزش Canvas درک تفاوت‌ها میان عنصرهای SVG و Canvas اهمیت دارد. SVG یک قالب گرافیکی برداری مبتنی بر XML است. می‌توان با استفاده از CSS‌ به SVG استایل (سبک | Style) اضافه کرد و همچنین، با استفاده از SVG DOM می‌توان رفتار پویا (رفتار دینامیک | Dynamic Behavior) افزود.

از طرف دیگر، Canvas مبتنی بر bitmap است و امکان رسم نگاره‌ها و اشکال را از طریق جاوا اسکریپت فراهم می‌کند. به مانند SVG، می‌توان استایل‌ها و رفتارهای دینامیک را به Canvas نیز اضافه کرد. در ادامه، برخی دلایل برتری Canvas نسبت به SVG‌ فهرست شده است.

شما میتونین برای یادگیری canvas و دیگر عناصر اچ تی ام ال در دوره رایگان آموزش HTLM آکادمی وب مسیر شرکت بکنین.

وقتی صحبت از رسم نگاره‌های پیچیده می‌شود، Canvas سریع‌تر عمل می‌کند.

در مورد Canvas می‌توان تصاویر را ذخیره کرد؛ درحالی‌که، در SVG این کار امکان‌پذیر نیست.

همه چیز در Canvas به صورت یک پیکسل (Pixel) است.

اما، SVG‌ برتری‌هایی هم دارد که در ادامه فهرست شده‌ است.

با توجه به اینکه SVG مستقل از رزلوشن است، می‌تواند در صفحه نمایش‌ها با رزولوشن‌های متفاوت اندازه را تطبیق دهد.

در SVG‌ به دلیل اینکه ماهیت XML وجود دارد، فرآیند هدف قرار دادن عنصرهای مختلف آسان‌تر است.

SVG در انیمیشن‌های پیچیده به خوبی عمل می‌کند.

بهتر است از کدامیک استفاده شود؟

برای توسعه نگاره‌های (Graphics) وابسته به رزلوشن تعاملی (Interactive) و مبتنی بر بردار (Vector-Based)، بهتر است SVG را انتخاب کرد. اگر نیاز به پردازش بسیار سریع نگاره‌ها وجود داشته باشد، مثلاً در بازی‌های کامپیوتری، یا تمایلی به کار با XML وجود نداشته باشد، می‌توان از Canvas استفاده کرد.

Canvas‌ و شتاب سخت‌افزاری

با وجود مرورگرهای دارای قابلیت شتاب سخت‌افزاری (Hardware Acceleration) به اندازه کافی رضایت توسعه‌دهندگان جلب می‌شود. زیرا این مرورگرها، تصاویر و انیمیشن‌های Canvas را با سرعت مناسبی برای کاربران پردازش می‌کنند و تجربه کاربری (User Experience) مطلوبی پدید می‌آورند. در نگاهی عمیق‌تر، می‌توان به این مسئله اشاره کرد که کامپیوترهای دسکتاپ امروزی علاوه‌بر داشتن CPU (واحد پردازش مرکزی | Central Processing Unit) دارای GPU (واحد پردازش گرافیکی | Graphical Processing Unit) نیز هستند.

 

بنابراین، وقتی زمان پردازش تصاویر و انیمیشن‌های سریع فرا می‌رسد، عملیات لازم به وسیله GPU انجام شده و پس از آن، CPU به انجام باقی وظایف ادامه می‌دهد. حاصل این همکاری، عملکرد گرافیکی شتاب‌یافته (Accelerated Graphics Performance) است. در حال حاضر نسخه‌های به‌روز کروم، فایرفاکس و اینترنت اکسپلورر از این قابلیت پشتیبانی می‌کنند.

 

API دو بعدی Canvas

API (واسط برنامه‌نویسی کاربردی |‌ Aplication Programing Interface) دو بُعدی Canvas، این امکان را به وجود می‌آورد که روی یک عنصر Canvas، تصاویر را ترسیم و عکس‌ها را مدیریت کرد. برای ارجاع به زمینه Canvas، از متُد getContext استفاده می‌شود. این متد تنها یک پارامتر به نام «2d» دارد. هر Canvas دارای زمینه مربوط به خودش است.

 

بنابراین، اگر در یک صفحه چند عنصر Canvas وجود داشته باشد، باید برای هر یک از زمینه‌هایی که قصد کار با آن‌ها وجود دارد، امکان ارجاع وجود داشته باشد. متد getContext یک زمینه ترسیم را روی Canvas بازمی‌گرداند. به غیر از getContext تعداد زیادی توابع و متدهای دیگر نیز در API دو بُعدی Canvas در دسترس است (توابع یک شی? در جاوا اسکریپت متُد نامیده می‌شوند). برخی از متدهای قابل توجه Canvas در ادامه فهرست شده‌اند.

 

متدهای مهم Canvas

در این بخش از مطلب آموزش Canvas برخی از متدهای مهم و قابل توجه Canvas دسته‌بندی و معرفی شده‌اند.

 

توابع تغییر شکل

دو تابع تغییر شکل (Transformation Function) شاخص فهرست شده است.

 

scale: امکان مقیاس‌دهی یک زمینه را ایجاد می‌کند.

rotate: امکان تغییر جهت مختصات x و y در یک زمینه را فراهم می‌کند.

توابع وضعیت

دو تابع وضعیت (State Function) کلیدی به صورت زیر است.

 

save: ذخیره وضعیت فعلی یک زمینه

restore: امکان بازیابی وضعیت یک زمینه را از یک حالت ذخیره شده قبلی فراهم می‌سازد.

توابع متنی

چند تابع متنی مهم در Canvas، در ادامه فهرست شده است:

 

font: فونت یک زمینه را دریافت یا تنظیم (اعمال) می‌کند.

fillText: یک رشته متنی را در موقعیت تعیین شده رسم می‌کند.

measureText: عرض یک متن مورد نظر را اندازه‌گیری می‌کند.

در بخش آموزش Canvas توضیحات بیش‌تری در خصوص اکثر این متدها داده شده و همچنین جهت درک و یادگیری بهتر، مثال‌هایی برای هر کدام ارائه شده است.

 

معرفی فیلم های آموزش طراحی سایت

 

 

فیلم‌های آموزش طراحی سایت در قالب یک مجموعه آموزشی گردآوری شده‌اند. این مجموعه، شامل 55 دوره آموزشی مختلف می‌شود که مدت زمان آن‌ها در مجموع نزدیک به 120 ساعت است. تا کنون، بیش از 100 هزار دانشجو از محتوای دوره‌ها و عناوین این مجموعه استفاده کرده‌اند.

 

در این مجموعه، دوره‌های آموزشی مختلفی در زمینه زبان‌های برنامه‌نویسی، ابزارها و فریم‌وُرک‌های مورد استفاده در طراحی سایت و برنامه‌های کاربردی از قبیل HTML، جاوا اسکریپت و CSS موجود است که پیش‌نیازهایی برای آموزش Canvas نیز محسوب می‌شوند. حتی می‌توان در زمینه بهبود سئو و امنیت سایت و کلیه مواردی که در طراحی و ساخت وب‌سایت‌ها مورد نیاز و استفاده است، دوره‌هایی را در این مجموعه آموزشی یافت.

 

 

برای دانلود مجموعه فیلم‌های آموزش طراحی سایت + اینجا کلیک کنید.

کار با Canvas

تا اینجا در روند آموزش Canvas آشنایی لازم با مفاهیم ابتدایی حاصل شد. اکنون، سایر جنبه‌ها و موارد استفاده Canvas‌ در ادامه فهرست می‌شوند.

 

کار با API متنی (Text API) برای Canvas

نگاره‌ها (گرافیک‌های) WebGL سه بعدی با Canvas

API تمام صفحه (Full Screen API)

انواع ترکیب لایه‌ها (Blend Mode) در Canvas

متد مربوط به تعریف جلوه‌ای که از هم‌پوشانی (Overlay) دو لایه در یک عنصر Canvas و اشکال CSS Canvas

متد مربوط به استفاده از HTML5 Canvas به عنوان یک تصویر پس‌زمینه (Backdrop)

تمرکز اصلی مطلب آموزش Canvas در زمینه استفاده از آن در HTML است و مفاهیم مقدماتی در این خصوص به صورت گام‌‌به ‌گام و به زبان ساده ارائه شده‌اند.

 

راه‌اندازی Canvas

برای راه‌اندازی یک Canvas جهت ترسیم، باید یک برچسب Canvas که به آن Canvas Tag گفته می‌شود، در HTML اضافه و یک زمینه دو بُعدی به آن تخصیص داده شود. تمام عملیات ترسیم در داخل زمینه صورت می‌گیرد. در ادامه مطلب آموزش Canvas نحوه راه‌اندازی آن به طور کامل شرح داده خواهد شد.

 

نکاتی قبل از شروع آموزش Canvas

استفاده از عنصر Canvas در HTML چندان دشوار نیست، اما باید درک ابتدایی از HTML و جاوا اسکریپت وجود داشته باشد. عنصر Canvas در برخی از مرورگرهای قدیمی‌تر پشتیبانی نمی‌شود؛ اما در نسخه‌های اخیر همه مرورگرهای شاخص تحت پشتیبانی است. اندازه پیش‌فرض Canvas سیصد پیکسل در صد و پنجاه پیکسل است (عرض x ارتفاع).

 

اما می‌توان با استفاده از صفت‌های (Attribute) ارتفاع (height) و عرض (Width) در HTML اندازه‌های دلخواه برای آن تعریف کرد. به منظور رسم نگاره‌ در Canvas از یک شی? Context جاوا اسکریپت استفاده می‌شود که در حین اجرا، نگاره‌ ایجاد می‌کند.

 

آموزش Canvas

در این بخش از مطلب، به آموزش Canvas در HTML‌ به صورت گام‌به‌گام پرداخته شده است. آموزش Canvas با نگاهی به عنصر Canvas در HTML آغاز می‌شود.

 

کاربرد ساده و ابتدایی Canvas

در این بخش نحوه راه‌اندازی یک زمینه (Context | بافت) دو بعدی و رسم اولین مثال ارائه شده است.

 

عنصر <canvas>

قالب یک عنصر <canvas> به صورت زیر است:

 

<canvas id="tutorial" width="150" height="150"></canvas>

در نگاه اول، یک برچسب Canvas شبیه به یک عنصر <img> به نظر می‌رسد. تنها تفاوت واضح برچسب‌های Canvas و img در این است که ‌برچسب <canvas> صفت‌های src و alt را ندارد. در واقع، عنصر Canvas تنها دارای دو صفت width و height است. هر دوی این صفت‌ها اختیاری (Optional) هستند و می‌توان آن‌ها را با استفاده از امکانات DOM (مدل شی?‌گرای سند | Document Object Model) تنظیم کرد. وقتی هیچ صفت width و height مشخص نشده باشد، عرض Canvas‌ به صورت پیش‌فرض 300 پیکسل و ارتفاع آن 150 پیکسل خواهد بود.

 

همچنین، در صورت تمایل می‌توان اندازه عنصر Canvas را با CSS تنظیم کرد. اما در حین پردازش (Rendering)، تصویر مقیاس‌بندی (Scale) می‌شود تا با اندازه طرح‌بندی (layout) خود مطابقت داشته باشد. اگر تنظیم اندازه با CSS از نسبت Canvas اولیه تبعیت نکند، از حالت طبیعی خود خارج و دارای اعوجاج (Distortion) خواهد شد.

 

نکته: اگر پردازش‌ها دارای اعوجاج به نظر می‌رسند، باید سعی داشت صفت‌های width و height به صراحت در <canvas> مشخص شوند و از CSS استفاده نشود.

صفت id مختص عنصر Canvas نیست؛ بلکه، یکی از صفت‌های سراسری HTML است که می‌تواند به هر عنصر HTML همچون عنصر class اعمال شود. همیشه بهتر است یک صفت id تعریف شود تا بتوان به راحتی یک عنصر را در اسکریپت پیدا کرد. عنصر Canvas می‌تواند درست مثل هر تصویر عادی دارای صفت‌های طراحی مانند margin (حاشیه)، border (لبه) و background (پس‌زمینه) باشد. اگر چه، این قواعد تا?ثیری روی طرح اصلی داخل Canvas‌ نخواهد داشت. وقتی هیچ قاعده طراحی (Styling Rule) به Canvas اعمال نشده باشد، در ابتدا به طور کامل ناپیدا (نورگذران | Transparent) خواهد بود.

 

استفاده از محتوای جایگزین در Canvas

عنصر Canvas نسبت به برچسب img و همچنین عناصر Video و Audio یا Pictures متفاوت است. می‌توان به راحتی برای مرورگرهای قدیمی که از Canvas پشتیبانی نمی‌کنند، محتوای جایگزین (Fallback Content) تعریف کرد. از جمله چنین مرورگرهایی، می‌توان به نسخه‌های قبل از نسخه نُه در Internet Explorer اشاره کرد.

 

فراهم کردن محتوای جایگزین به راحتی انجام می‌شود؛‌ فقط باید محتوای مربوطه را داخل عنصر Canvas قرار داد. مرورگرهایی که از Canvas پشتیبانی نمی‌کنند، Container‌ را در نظر نخواهند گرفت و محتوای جایگزین داخل آن را پردازش خواهند کرد. از طرف دیگر، مرورگرهایی که از Canvas پشتیبانی می‌کنند از محتوای داخل Container‌ چشم‌پوشی و خود Canvas را به طور معمول رندر خواهند کرد.

 

منبع: فرادرس